<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/1/11
  Time: 13:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="webroot" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>用户登录</title>
    <script src="./element/vue.js"></script>
    <script src="./js/vue-resource.js"></script>
    <link rel="stylesheet" href="./element/index.css">
    <script src="./element/index.js"></script>
    <link href="./styles/basc.css">
</head>
<body>
<div id="app">
    <div style="padding-top: 60px;margin-left: 680px;">
        <font class="press">天天超市进销存系统</font>
    </div>
    <div style="margin-top: 100px;margin-left: 600px;">
        <div class="login">
            <el-form
                    :model="loginForm"
                    ref="loginForm"
                    label-width="0px"
                    :rules="rules"
            >
                <div class="operation" style="margin-left: 10px;padding-top: 10px;">验证登录信息↓：<span class="mess"
                                                                                                  id="userLoginMess">${requestScope.userLoginMess}</span>
                </div>
                <div style="padding-top: 50px;">
                    <el-form-item prop="username" class="no-label">
                        <el-input
                                placeholder="请输入账号"
                                v-model="loginForm.username"
                                clearable
                                id="username"
                                name="username"
                                value=""
                        />
                    </el-form-item>
                    <el-form-item prop="password" class="no-label" style="margin-top:20px;">
                        <el-input
                                placeholder="请输入密码"
                                v-model="loginForm.password"
                                type="password"
                                show-password
                                id="password"
                                name="password"
                                value=""
                        />
                    </el-form-item>
                    <div style="float: left;margin-left: 100px;margin-top: 20px;">
                        <el-form-item prop="code" class="no-label" style="width: 100px;">
                            <el-input
                                    placeholder="请输入验证码"
                                    v-model="loginForm.code"
                                    type="code"
                                    id="code"
                                    name="code"
                                    value=""
                            />
                        </el-form-item>
                    </div>
                    <div style="float: left;margin-top: 30px;margin-left: 20px;">
                        <img src="${webroot}/code.jsp" id="imagecode" title="点击可更换" onclick="this.src+='?tm='+ Math.random();"/>
                        <span style="color: #F04A00;font-size: 5px;">*看不清？点击验证码图片更更换</span>
                    </div>
                </div>
                <div style="margin-top: 90px;float: none;">
                    <el-form-item prop="submit">
                        <el-button
                                class="submit-btn"
                                type="primary"
                                @click="login()"
                                style="width: 300px;margin-left: 100px;"
                        >
                            登录
                        </el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            loginForm: {
                username: "",
                password: "",
                code:""
            },
            rules: {
                username: [
                    {required: true, message: "请输入用户名", trigger: "blur"},
                ],
                password: [
                    {required: true, message: "请输入密码", trigger: "blur"},
                    {
                        min: 6,
                        max: 15,
                        message: "长度在 6 到 15 个字符",
                        trigger: "blur",
                    },
                ],
                code: [
                    {required: true, message: "请输入验证码", trigger: "blur"},
                ],
            },
        },
        methods:{
            login:function (){
                var log = {
                    username: this.loginForm.username,
                    password: this.loginForm.password,
                    code: this.loginForm.code
                }
                window.location.href = '${webroot}/login.do?login=' + JSON.stringify(log);
            }
        }

    })
</script>
</body>
<style scoped>
    body {
        background: url('./images/backgroup.jpg');
        background-size: cover;
        background-attachment: fixed;
    }

    .login {
        width: 500px;
        height: 350px;
        margin: 0 auto;
        background: #fff !important;
        box-shadow: 2px 2px 10px #aaa !important;
    }

    .press {
        color: transparent;
        background-color: black;
        text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px,
        rgba(255, 255, 255, 0.2) 1px 3px 3px;
        -webkit-background-clip: text !important;
        font-size: 60px;
    }

    .no-label {
        width: 300px;
        margin: 0 auto;
        border: 0px;
        height: 50px;
    }

    .el-input__inner {
        border: none;
    }

    #app {
        width: 1280px;
    }
</style>
</html>
